<template>
  <div id="app">
    <!--导航菜单-->
    <div class="nav">
      <h1 class="nav-logo">
        <a href="/"></a>
      </h1>
      <div class="nav-container">
        <ul>
          <li><a href="#" class="high">在线商城</a></li>
          <li><a href="#">坚果 Pro 3</a></li>
          <li><a href="#">坚果 Pro 2S</a></li>
          <li><a href="#">坚果 TNT 工作站</a></li>
          <li><a href="#">Smartisan OS</a></li>
          <li><a href="#">欢喜云</a></li>
          <li><a href="#">应用</a></li>
          <li><a href="#">论坛</a></li>
          <li><a href="#">荣誉与奖状</a></li>
          <!--<li><a href="#">加入我们</a></li>-->
          <li><a href="#">下载 APP</a></li>
        </ul>
      </div>
      <div class="nav-aside">
        <ul>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
        </ul>
      </div>
    </div>
    <div class="nav-sub-wrapper" id="nav-sub-wrapper" ref="wrapper">
      <div class="container">
        <ul>
          <li><a href="#">首页</a></li>
          <li><a href="#">手机</a></li>
          <li><a href="#">官方配件</a></li>
          <li><a href="#">服饰箱包</a></li>
          <li><a href="#">畅呼吸</a></li>
          <li><a href="#">基因检测</a></li>
          <li><a href="#">打印机</a></li>
          <li><a href="#">扫地机器人</a></li>
          <li><a href="#">服务</a></li>
        </ul>
        <!--搜索框-->
        <div class="nav-serach">
          <input type="text" class="sreach-box" @focus="sreachDesc" @blur="descFalse" v-bind:placeholder="descVal" :class="['current' ? '.nav-serach .sreach-box::placeholder' : '']">
          <span class="search-btn"></span>
          <div class="sreach-recommend-words">
            <a href="">坚果Pro 3</a><a href="">坚果新品</a>
          </div>
        </div>
      </div>
    </div>
    <!--内容区域-->
    <router-view/>
    <!--底部栏-->
    <div class="footer">
      <div class="siteinfo">
        <ul>
          <li>
            <a href="#"><h3>订单服务</h3></a>
            <ul>
              <li><a href="#">购买指南</a></li>
              <li><a href="#">送货政策</a></li>
            </ul>
          </li>
          <li>
            <a href="#"><h3>服务支持</h3></a>
            <ul>
              <li><a href="#">零售门店</a></li>
              <li><a href="#">自助服务</a></li>
              <li><a href="#">维修门店</a></li>
            </ul>
          </li>
          <li>
            <a href="#"><h3>媒体中心</h3></a>
            <ul>
              <li><a href="#">新闻动态</a></li>
              <li><a href="#">官方视频</a></li>
              <li><a href="#">图片资源</a></li>
            </ul>
          </li>
          <li>
            <a href="#"><h3>关注我们</h3></a>
            <ul>
              <li><a href="#">新浪微博</a></li>
              <li><a href="#">官方微信</a></li>
              <li><a href="#">荣誉奖项</a></li>
            </ul>
          </li>
        </ul>
        <div class="corp-info">
          <ul>
            <li class="phone">400 - 603 - 5000</li>
            <li class="time">周一到周日 9:00 - 18:00</li>
            <li class="desc">(仅收市话费)</li>
            <li>
              <a href="#" class="online">
                <span class="iconfont icon-xunwen use-icon"></span>
                在线帮助
              </a>
            </li>
          </ul>
        </div>
      </div>
      <div class="copyright">
        <h4>Copyright © 2019 smartisan.com 版权所有</h4>
        <ul>
          <li><a href="#">锤子商城隐私政策</a></li>
          <li><a href="#">锤子商城用户协议</a></li>
        </ul>
        <h6>京 ICP 备 19048576 号 - 1</h6>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      descVal: '',
      current: false
    }
  },
  methods: {
    handleScroll () {
      // 将导航栏固定
      if (document.documentElement.scrollTop >= 45) {
        // this.$refs.wrapper.style.position = 'fixed'
        // this.$refs.wrapper.style.width = '100%'
        // this.$refs.wrapper.style.top = '0'
        // this.$refs.wrapper.style.padding = '16px 0'
        // this.$refs.wrapper.style.backgroundColor = '#FFF'
        this.$refs.wrapper.className = 'nav-sub-wrapper-fixed'
      } else {
        // 滚动距离没超过45时恢复成默认样式
        // this.$refs.wrapper.style.position = 'unset'
        // this.$refs.wrapper.style.padding = '23px 0'
        // this.$refs.wrapper.style.top = '-65px'
        this.$refs.wrapper.className = 'nav-sub-wrapper'
      }
    },
    // 搜索框描述
    // 输入框获取焦点时
    sreachDesc () {
      this.descVal = '请输入搜索的商品'
      this.current = !this.current
    },
    // 输入框失去焦点时
    descFalse () {
      this.descVal = ''
    }
  },
  mounted () {
    // 当页面滚动时
    window.addEventListener('scroll', this.handleScroll)
  }
}
</script>
<style scoped>
  #app {
    background-color: #ededed;
  }

  .nav {
    position: relative;
    height: 45px;
    background: linear-gradient(90deg, #222325, #3b3c3f, #222325);
  }

  .nav .nav-container {
    width: 1220px;
    height: 45px;
    margin: 0 auto;
    text-align: center;
  }

  .nav .nav-container ul {
    float: right;
    margin: 0 181px 0 0;
  }

  .nav .nav-container ul li {
    float: left;
  }

  .nav .nav-container ul li a {
    display: block;
    color: hsla(0, 0%, 100%, .7);
    font-size: 12px;
    padding: 0 20px;
    line-height: 45px;
  }

  .nav .nav-container ul li a.high {
    color: #e5e5e5;
    font-weight: bold;
  }

  .nav .nav-logo {
    float: left;
    margin-left: 21px;
    padding: 13px 0 0;
  }

  .nav .nav-logo a {
    display: block;
    background: url("./assets/images/logo.557a1159a7b50cad819b869ebbe5051a.png");
    width: 18px;
    height: 18px;
    /*使背景图片根据宽高自动伸缩大小，铺满全屏（图片原始大小没有宽高大的话可能会造成空白）*/
    background-size: contain;
  }

  .nav .nav-aside {
    position: absolute;
    top: 11px;
    right: 21px;
  }

  .nav .nav-aside ul li {
    float: left;
  }

  .nav .nav-aside ul li:first-child a {
    display: block;
    width: 20px;
    height: 20px;
    background: url('./assets/images/avatar-and-cart.c2634628597594cf0fdab831abe6499d.png') no-repeat;
    background-position: 1px 2px;
    background-size: 180%
  }

  .nav .nav-aside ul li:last-of-type a {
    display: block;
    width: 20px;
    height: 20px;
    background: url("./assets/images/avatar-and-cart.c2634628597594cf0fdab831abe6499d.png") no-repeat;
    background-position: 0px -17px;
    background-size: 180%;
    margin-left: 20px;
  }

  .nav-sub-wrapper {
    padding: 23px 0;
    overflow: hidden;
    height: 28px;
    line-height: 28px;
    background-color: #fff;
    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, .05);
    border-bottom: 1px solid #e1e1e1;
    top: -65px;
  }
  .nav-sub-wrapper-fixed {
    position: fixed;
    z-index: 9999;
    width: 100%;
    top: 0;
    transition: top 0.3s linear 0.1s;
    padding: 16px 0;
    overflow: hidden;
    height: 28px;
    line-height: 28px;
    background-color: #fff;
    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, .05);
    border-bottom: 1px solid #e1e1e1;
  }
  .nav-sub-wrapper-fixed a {
    color: gray !important;
  }

  #nav-sub-wrapper > .container {
    width: 1220px;
    margin: 0 auto;
  }
  #nav-sub-wrapper-fixed > .container {
    width: 1220px;
    margin: 0 auto;
  }

  #nav-sub-wrapper > .container ul > li {
    float: left;
  }

  #nav-sub-wrapper > .container ul > li > a {
    padding-right: 30px;
    color: rgba(0, 0, 0, .7);
    font-size: 14px;
  }

  #nav-sub-wrapper > .container ul > li > a:hover {
    color: #5079d9
  }

  .nav-serach {
    width: 330px;
    height: 36px;
    position: relative;
    top: -4px;
    float: right;
    border-radius: 20px;
    border: 1px solid rgba(0,0,0,.08);
    box-sizing: border-box;
  }
  .nav-serach .sreach-box {
    margin-left: 40px;
    border: none;
    height: 32px;
    outline: none;
    font-size: 14px;
    box-shadow: none;
    font-family: sans-serif;
    color: #333;
    font-weight: 700;
  }
  .nav-serach .sreach-box::placeholder {
    color: #cccccc;
    font-weight: unset !important;
  }
  .nav-serach .search-btn {
    width: 20px;
    height: 20px;
    display: inline-block;
    position: absolute;
    left: 10px;
    top: 7px;
    background: url("./assets/images/下载.png");
    cursor: pointer;
  }
  .nav-serach .sreach-recommend-words {
    position: absolute;
    right: 0;
    top: 7px;
    line-height: 1;
  }
  .nav-serach .sreach-recommend-words a:first-of-type {
    font-size: 12px;
    background: #e5efff;
    border: 1px solid #93b2f7;
    border-radius: 10px;
    padding: 0 10px;
    color: #3965cc;
    font-weight: 700;
    display: inline-block;
    height: 20px;
    line-height: 20px;
    margin-right: 8px;
    box-sizing: border-box;
  }
  .nav-serach .sreach-recommend-words a:last-of-type {
    font-size: 12px;
    border-radius: 10px;
    padding: 0 10px;
    font-weight: 700;
    display: inline-block;
    height: 20px;
    line-height: 20px;
    color: #8aad37;
    border: 1px solid rgba(138,173,55,.6);
    background: #f7fae1;
    box-sizing: border-box;
    margin-right: 8px;
  }

  .footer {
    background-color: #fafafa;
  }

  .footer .siteinfo {
    overflow: hidden;
    width: 1220px;
    padding: 60px 0 55px;
    margin: 0 auto;
    border-bottom: 1px solid #e6e6e6;
  }

  .footer .siteinfo > ul > li {
    float: left;
    margin-right: 90px;
  }

  .footer .siteinfo > ul > li h3 {
    padding: 0 0 20px;
    font-size: 12px;
    color: #646464;
    font-weight: bold;
  }

  .footer .siteinfo > ul > li li {
    line-height: 1;
    padding: 7px 0;
  }

  .footer .siteinfo > ul > li li > a {
    font-size: 12px;
    color: #c3c3c3
  }

  .footer .siteinfo > .corp-info {
    float: right;
  }

  .footer .siteinfo > .corp-info li {
    text-align: right;
  }

  .footer .siteinfo > .corp-info .phone {
    color: #5079d9;
    font-weight: 900;
    font-size: 18px;
    cursor: default;
  }

  .footer .siteinfo > .corp-info .time {
    margin-top: 15px;
    font-family: PingFang SC;
    color: #999;
    font-size: 12px;
    line-height: 1;
  }

  .footer .siteinfo > .corp-info .desc {
    line-height: 1;
    margin-top: 5px;
    font-size: 12px;
    color: #999;
  }

  .footer .siteinfo > .corp-info .online {
    display: block;
    float: right;
    color: #5079d9;
    width: 132px;
    height: 30px;
    line-height: 30px;
    font-size: 12px;
    border: 1px solid #d0d0d0;
    text-align: center;
    background: linear-gradient(#fcfcfc, #f5f5f5);
    font-weight: 700;
    box-sizing: border-box;
    margin-top: 15px;
    border-radius: 5px;
  }

  .footer .siteinfo > .corp-info .online:hover {
    background: #f5f5f5;
  }

  .footer .siteinfo > .corp-info .online .use-icon {
    font-size: 14px;
    position: relative;
    top: 1px;
  }

  .footer .copyright {
    color: #bdbdbd;
    font-size: 12px;
    margin: 0 auto;
    width: 1220px;
    padding: 30px 0 60px;
  }

  .footer .copyright h4 {
    float: left;
    margin-right: 12px;
  }

  .footer .copyright ul {
    overflow: hidden;
  }

  .footer .copyright ul > li {
    float: left;
    padding: 1px 10px 0;
    border-left: 1px solid #cccccc;
    line-height: 17px;
  }

  .footer .copyright ul > li > a {
    color: #bdbdbd;
  }

  .footer .copyright h6 {
    padding: 10px 0 0;
  }
</style>
